<template>
  <div class="data-collection-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h1 class="page-title">
        <i class="header-icon">📊</i>
        海关数据采集入库管理
      </h1>
      <p class="page-description">支持手工录入、CSV文件上传和批量数据入库操作</p>
    </div>

    <!-- 功能选项卡 -->
    <div class="tab-container">
      <div class="tab-nav">
        <button 
          v-for="tab in tabs" 
          :key="tab.key"
          :class="['tab-btn', { active: activeTab === tab.key }]"
          @click="switchTab(tab.key)"
        >
          <i :class="tab.icon"></i>
          {{ tab.label }}
        </button>
      </div>
    </div>

    <!-- 手工录入 -->
    <div v-if="activeTab === 'manual'" class="tab-content">
      <div class="form-card">
        <div class="card-header">
          <h3>手工录入数据</h3>
          <p>请填写完整的报关单信息</p>
        </div>
        <form @submit.prevent="submitManualData" class="manual-form">
          <div class="form-row">
            <div class="form-group">
              <label>关区 <span class="required">*</span></label>
              <select v-model="manualForm.customsArea" required>
                <option value="">请选择关区</option>
                <option v-for="area in customsAreas" :key="area.areaCode" :value="area.areaCode">
                  {{ area.areaName }}
                </option>
              </select>
            </div>
            <div class="form-group">
              <label>报关单号 <span class="required">*</span></label>
              <input 
                type="text" 
                v-model="manualForm.declareNo" 
                placeholder="请输入18位报关单号"
                maxlength="18"
                required
              >
            </div>
          </div>
          
          <div class="form-row">
            <div class="form-group">
              <label>项号 <span class="required">*</span></label>
              <input 
                type="text" 
                v-model="manualForm.itemNo" 
                placeholder="请输入3位项号"
                maxlength="3"
                required
              >
            </div>
            <div class="form-group">
              <label>币制 <span class="required">*</span></label>
              <select v-model="manualForm.currencyType" required>
                <option value="">请选择币制</option>
                <option value="1">人民币</option>
                <option value="2">美元</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>金额(人民币) <span class="required">*</span></label>
              <input 
                type="number" 
                v-model.number="manualForm.amountCny" 
                placeholder="请输入人民币金额"
                step="0.01"
                min="0"
                required
              >
            </div>
            <div class="form-group">
              <label>金额(美元)</label>
              <input 
                type="number" 
                v-model.number="manualForm.amountUsd" 
                placeholder="请输入美元金额"
                step="0.01"
                min="0"
              >
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>商品数量 <span class="required">*</span></label>
              <input 
                type="number" 
                v-model.number="manualForm.goodsQuantity" 
                placeholder="请输入商品数量"
                min="1"
                required
              >
            </div>
          </div>

          <div class="form-actions">
            <button type="button" @click="resetManualForm" class="btn btn-secondary">
              重置
            </button>
            <button type="submit" class="btn btn-primary" :disabled="submitting">
              <i v-if="submitting" class="loading-icon">⏳</i>
              {{ submitting ? '提交中...' : '提交数据' }}
            </button>
          </div>
        </form>
      </div>
    </div>

    <!-- CSV文件上传 -->
    <div v-if="activeTab === 'csv'" class="tab-content">
      <div class="upload-card">
        <div class="card-header">
          <h3>CSV文件上传</h3>
          <p>支持批量导入海关数据，请确保文件格式正确</p>
        </div>
        
        <div class="upload-area">
          <div class="upload-form">
            <div class="form-row">
              <div class="form-group">
                <label>关区 <span class="required">*</span></label>
                <select v-model="csvForm.customsArea" required>
                  <option value="">请选择关区</option>
                  <option v-for="area in customsAreas" :key="area.areaCode" :value="area.areaCode">
                    {{ area.areaName }}
                  </option>
                </select>
              </div>
              <div class="form-group">
                <label>操作人 <span class="required">*</span></label>
                <select v-model="csvForm.userId" required>
                  <option value="">请选择操作人</option>
                  <option v-for="user in users" :key="user.id" :value="user.id">
                    {{ user.realName }}
                  </option>
                </select>
              </div>
            </div>
          </div>

          <div class="file-upload-zone" @drop="handleDrop" @dragover.prevent @dragenter.prevent>
            <input 
              type="file" 
              ref="fileInput" 
              @change="handleFileSelect" 
              accept=".csv"
              style="display: none"
            >
            <div class="upload-content" @click="$refs.fileInput.click()">
              <div class="upload-icon">📁</div>
              <p class="upload-text">点击选择文件或拖拽CSV文件到此处</p>
              <p class="upload-hint">仅支持.csv格式文件，最大10MB</p>
            </div>
          </div>

          <div v-if="selectedFile" class="file-info">
            <div class="file-item">
              <i class="file-icon">📄</i>
              <span class="file-name">{{ selectedFile.name }}</span>
              <span class="file-size">({{ formatFileSize(selectedFile.size) }})</span>
              <button @click="removeFile" class="remove-btn">✕</button>
            </div>
          </div>

          <div class="upload-actions">
            <button 
              @click="uploadCSV" 
              :disabled="!selectedFile || !csvForm.customsArea || !csvForm.userId || uploading"
              class="btn btn-primary"
            >
              <i v-if="uploading" class="loading-icon">⏳</i>
              {{ uploading ? '上传中...' : '开始上传' }}
            </button>
          </div>
        </div>

        <!-- CSV格式说明 -->
        <div class="format-guide">
          <h4>CSV文件格式要求：</h4>
          <div class="format-example">
            <p><strong>标题行：</strong>报关单号,项号,币制,人民币金额,美元金额,商品数量</p>
            <p><strong>示例数据：</strong>123456789012345678,001,1,10000.00,1500.00,100</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 待入库数据列表 -->
    <div v-if="activeTab === 'pending'" class="tab-content">
      <div class="list-card">
        <div class="card-header">
          <h3>待入库数据列表</h3>
          <div class="header-actions">
            <button @click="refreshPendingList" class="btn btn-secondary">
              <i class="refresh-icon">🔄</i>
              刷新
            </button>
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-bar">
          <div class="filter-group">
            <label>关区筛选：</label>
            <select v-model="pendingFilter.customsArea" @change="loadPendingList">
              <option value="">全部关区</option>
              <option v-for="area in customsAreas" :key="area.areaCode" :value="area.areaCode">
                {{ area.areaName }}
              </option>
            </select>
          </div>
        </div>

        <!-- 数据表格 -->
        <div class="data-table">
          <table>
            <thead>
              <tr>
                <th>选择</th>
                <th>采集ID</th>
                <th>数据类型</th>
                <th>关区</th>
                <th>报关单号</th>
                <th>项号</th>
                <th>币制</th>
                <th>人民币金额</th>
                <th>美元金额</th>
                <th>商品数量</th>
                <th>采集时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in pendingList" :key="item.id">
                <td>
                  <input 
                    type="checkbox" 
                    :value="item.id" 
                    v-model="selectedItems"
                  >
                </td>
                <td>{{ item.id }}</td>
                <td>
                  <span :class="['data-type-tag', getDataTypeClass(item.dataType)]">
                    {{ getDataTypeText(item.dataType) }}
                  </span>
                </td>
                <td>{{ getCustomsAreaName(item.customsArea) }}</td>
                <td>{{ item.declareNo }}</td>
                <td>{{ item.itemNo }}</td>
                <td>{{ getCurrencyText(item.currencyType) }}</td>
                <td class="amount">¥{{ formatAmount(item.amountCny) }}</td>
                <td class="amount">${{ formatAmount(item.amountUsd) }}</td>
                <td>{{ item.goodsQuantity }}</td>
                <td>{{ formatDateTime(item.createTime) }}</td>
                <td>
                  <button 
                    @click="warehousingData(item.id)" 
                    class="btn btn-sm btn-primary"
                    :disabled="warehousingIds.includes(item.id)"
                  >
                    {{ warehousingIds.includes(item.id) ? '入库中...' : '入库' }}
                  </button>
                </td>
              </tr>
              <tr v-if="pendingList.length === 0">
                <td colspan="12" class="no-data">暂无待入库数据</td>
              </tr>
            </tbody>
          </table>
        </div>

        <!-- 批量操作 -->
        <div class="batch-actions" v-if="selectedItems.length > 0">
          <span class="selected-count">已选择 {{ selectedItems.length }} 项</span>
          <button @click="batchWarehousing" class="btn btn-primary" :disabled="batchProcessing">
            <i v-if="batchProcessing" class="loading-icon">⏳</i>
            {{ batchProcessing ? '批量入库中...' : '批量入库' }}
          </button>
        </div>

        <!-- 分页 -->
        <div class="pagination" v-if="pendingList.length > 0">
          <button 
            @click="changePage(currentPage - 1)" 
            :disabled="currentPage <= 1"
            class="btn btn-secondary"
          >
            上一页
          </button>
          <span class="page-info">第 {{ currentPage }} 页</span>
          <button 
            @click="changePage(currentPage + 1)" 
            :disabled="pendingList.length < pageSize"
            class="btn btn-secondary"
          >
            下一页
          </button>
        </div>
      </div>
    </div>

    <!-- 消息提示 -->
    <div v-if="message.show" :class="['message-toast', message.type]">
      <i :class="getMessageIcon(message.type)"></i>
      {{ message.text }}
    </div>
  </div>
</template>

<script>
import { dataCollectionApi } from '@/assets/api/dataCollection.js'

export default {
  name: 'DataCollection',
  data() {
    return {
      activeTab: 'manual',
      tabs: [
        { key: 'manual', label: '手工录入', icon: '✍️' },
        { key: 'csv', label: 'CSV上传', icon: '📁' },
        { key: 'pending', label: '待入库数据', icon: '📋' }
      ],
      
      // 手工录入表单
      manualForm: {
        customsArea: '',
        declareNo: '',
        itemNo: '',
        currencyType: '',
        amountCny: null,
        amountUsd: null,
        goodsQuantity: null,
        userId: null
      },
      
      // CSV上传表单
      csvForm: {
        customsArea: '',
        userId: null
      },
      
      // 待入库数据筛选
      pendingFilter: {
        customsArea: ''
      },
      
      // 基础数据
      customsAreas: [],
      users: [],
      pendingList: [],
      selectedItems: [],
      selectedFile: null,
      
      // 状态控制
      submitting: false,
      uploading: false,
      batchProcessing: false,
      warehousingIds: [],
      
      // 分页
      currentPage: 1,
      pageSize: 10,
      
      // 消息提示
      message: {
        show: false,
        type: 'success',
        text: ''
      }
    }
  },
  
  mounted() {
    this.initializeUserData()
    this.loadBasicData()
    // 延迟加载待入库数据，确保基础数据先加载完成
    setTimeout(() => {
      this.loadPendingList()
    }, 100)
  },
  
  methods: {
    // 初始化用户数据
    initializeUserData() {
      const currentUserId = this.getCurrentUserId()
      this.manualForm.userId = currentUserId
      this.csvForm.userId = currentUserId
    },
    
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab
      if (tab === 'pending') {
        this.loadPendingList()
      }
    },
    
    // 加载基础数据
    async loadBasicData() {
      try {
        console.log('开始加载基础数据...')
        
        // 使用二次封装的请求方法，让拦截器处理错误
        const [areasRes, usersRes] = await Promise.all([
          dataCollectionApi.getCustomsAreaList(),
          dataCollectionApi.getUserList()
        ])
        
        console.log('关区数据响应:', areasRes)
        console.log('用户数据响应:', usersRes)
        
        // 处理关区数据 - 响应拦截器返回完整response对象，数据在response.data.data中
        if (areasRes && areasRes.data && areasRes.data.data) {
          if (Array.isArray(areasRes.data.data)) {
            this.customsAreas = areasRes.data.data
            console.log('关区数据加载成功:', this.customsAreas)
          } else if (areasRes.data.data.records && Array.isArray(areasRes.data.data.records)) {
            this.customsAreas = areasRes.data.data.records
            console.log('关区数据加载成功(分页格式):', this.customsAreas)
          } else {
            console.warn('关区数据格式异常:', areasRes.data)
            this.setDefaultCustomsAreas()
          }
        } else {
          this.setDefaultCustomsAreas()
        }
        
        // 处理用户数据 - 响应拦截器返回完整response对象，数据在response.data.data中
        if (usersRes && usersRes.data && usersRes.data.data) {
          if (Array.isArray(usersRes.data.data)) {
            this.users = usersRes.data.data
            console.log('用户数据加载成功:', this.users)
          } else if (usersRes.data.data.records && Array.isArray(usersRes.data.data.records)) {
            this.users = usersRes.data.data.records
            console.log('用户数据加载成功(分页格式):', this.users)
          } else {
            console.warn('用户数据格式异常:', usersRes.data)
            this.setDefaultUsers()
          }
        } else {
          this.setDefaultUsers()
        }
        
      } catch (error) {
        // 响应拦截器已经处理了错误提示，这里只需要设置默认数据
        console.error('加载基础数据失败，使用默认配置:', error)
        this.setDefaultCustomsAreas()
        this.setDefaultUsers()
      }
    },
    
    // 设置默认关区数据
    setDefaultCustomsAreas() {
      this.customsAreas = [
        { areaCode: '0100', areaName: '北京海关' },
        { areaCode: '0200', areaName: '天津海关' },
        { areaCode: '0300', areaName: '石家庄海关' },
        { areaCode: '2200', areaName: '上海海关' },
        { areaCode: '2800', areaName: '南京海关' },
        { areaCode: '5100', areaName: '广州海关' },
        { areaCode: '5700', areaName: '深圳海关' }
      ]
    },
    
    // 设置默认用户数据
    setDefaultUsers() {
      this.users = [
        { id: 1, realName: '系统管理员', username: 'admin' },
        { id: 2, realName: '数据录入员', username: 'operator' }
      ]
    },
    
    // 提交手工录入数据
    async submitManualData() {
      this.submitting = true
      try {
        const response = await dataCollectionApi.manualInput(this.manualForm)
        console.log('手工录入响应:', response)
        if (response.code === 200) {
          this.showMessage('success', '数据录入成功')
          this.resetManualForm()
          if (this.activeTab === 'pending') {
            this.loadPendingList()
          }
        } else {
          this.showMessage('error', response.message || '数据录入失败')
        }
      } catch (error) {
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.submitting = false
      }
    },
    
    // 重置手工录入表单
    resetManualForm() {
      this.manualForm = {
        customsArea: '',
        declareNo: '',
        itemNo: '',
        currencyType: '',
        amountCny: null,
        amountUsd: null,
        goodsQuantity: null,
        userId: this.getCurrentUserId()
      }
    },
    
    // 处理文件选择
    handleFileSelect(event) {
      const file = event.target.files[0]
      if (file) {
        this.validateAndSetFile(file)
      }
    },
    
    // 处理拖拽上传
    handleDrop(event) {
      event.preventDefault()
      const files = event.dataTransfer.files
      if (files.length > 0) {
        this.validateAndSetFile(files[0])
      }
    },
    
    // 验证并设置文件
    validateAndSetFile(file) {
      if (!file.name.toLowerCase().endsWith('.csv')) {
        this.showMessage('error', '请选择CSV格式文件')
        return
      }
      if (file.size > 10 * 1024 * 1024) {
        this.showMessage('error', '文件大小不能超过10MB')
        return
      }
      this.selectedFile = file
    },
    
    // 移除文件
    removeFile() {
      this.selectedFile = null
      this.$refs.fileInput.value = ''
    },
    
    // 上传CSV文件
    async uploadCSV() {
      if (!this.selectedFile || !this.csvForm.customsArea || !this.csvForm.userId) {
        this.showMessage('error', '请完善上传信息')
        return
      }
      
      this.uploading = true
      try {
        const formData = new FormData()
        formData.append('file', this.selectedFile)
        formData.append('customsArea', this.csvForm.customsArea)
        formData.append('userId', this.csvForm.userId)
        
        const response = await dataCollectionApi.csvUpload(formData)
        if (response.code === 200) {
          this.showMessage('success', response.data)
          this.removeFile()
          this.csvForm = { customsArea: '', userId: '' }
          if (this.activeTab === 'pending') {
            this.loadPendingList()
          }
        } else {
          this.showMessage('error', response.message || 'CSV上传失败')
        }
      } catch (error) {
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.uploading = false
      }
    },
    
    // 加载待入库数据列表
    async loadPendingList() {
      try {
        console.log('开始加载待入库数据...')
        const params = {
          page: this.currentPage,
          size: this.pageSize,
          ...this.pendingFilter
        }
        
        const response = await dataCollectionApi.getPendingList(params)
        console.log('待入库数据响应:', response)
        
        if (response && response.data && response.data.code === 200) {
          // 确保数据是数组格式 - 数据在response.data.data中
          if (Array.isArray(response.data.data)) {
            this.pendingList = response.data.data
          } else if (response.data.data && Array.isArray(response.data.data.records)) {
            // 处理分页数据格式
            this.pendingList = response.data.data.records
          } else {
            this.pendingList = []
          }
          console.log('待入库数据加载成功，数量:', this.pendingList.length)
          console.log('待入库数据详情:', this.pendingList)
        } else {
          console.warn('待入库数据加载失败:', response?.data?.message)
          this.pendingList = []
          this.showMessage('warning', response?.data?.message || '数据加载失败')
        }
      } catch (error) {
        console.error('加载待入库数据异常:', error)
        this.pendingList = []
        this.showMessage('error', '网络异常，无法加载数据')
      }
    },
    
    // 刷新待入库列表
    refreshPendingList() {
      this.currentPage = 1
      this.selectedItems = []
      this.loadPendingList()
    },
    
    // 单个数据入库
    async warehousingData(collectionId) {
      this.warehousingIds.push(collectionId)
      try {
        const response = await dataCollectionApi.warehousing({
          collectionId: collectionId,
          userId: this.getCurrentUserId()
        })
        
        if (response.code === 200) {
          this.showMessage('success', '数据入库成功')
          this.loadPendingList()
        } else {
          this.showMessage('error', response.message || '数据入库失败')
        }
      } catch (error) {
        this.showMessage('error', '系统异常，请稍后重试')
      } finally {
        this.warehousingIds = this.warehousingIds.filter(id => id !== collectionId)
      }
    },
    
    // 批量入库
    async batchWarehousing() {
      if (this.selectedItems.length === 0) {
        this.showMessage('warning', '请选择要入库的数据')
        return
      }
      
      this.batchProcessing = true
      try {
        let successCount = 0
        for (const collectionId of this.selectedItems) {
          try {
            const response = await dataCollectionApi.warehousing({
              collectionId: collectionId,
              userId: this.getCurrentUserId()
            })
            if (response.code === 200) {
              successCount++
            }
          } catch (error) {
            console.error(`入库失败: ${collectionId}`, error)
          }
        }
        
        this.showMessage('success', `批量入库完成，成功处理${successCount}条数据`)
        this.selectedItems = []
        this.loadPendingList()
      } catch (error) {
        this.showMessage('error', '批量入库异常')
      } finally {
        this.batchProcessing = false
      }
    },
    
    // 分页切换
    changePage(page) {
      if (page >= 1) {
        this.currentPage = page
        this.loadPendingList()
      }
    },
    
    // 工具方法
    getDataTypeText(type) {
      const types = {
        1: 'FTP导入',
        2: 'CSV上报',
        3: '手工录入',
        4: '主动采集'
      }
      return types[type] || '未知'
    },
    
    getDataTypeClass(type) {
      const classes = {
        1: 'ftp',
        2: 'csv',
        3: 'manual',
        4: 'active'
      }
      return classes[type] || ''
    },
    
    getCurrencyText(type) {
      return type === 1 ? '人民币' : type === 2 ? '美元' : '未知'
    },
    
    formatAmount(amount) {
      return amount ? amount.toLocaleString() : '0.00'
    },
    
    formatDateTime(dateTime) {
      if (!dateTime) return ''
      return new Date(dateTime).toLocaleString('zh-CN')
    },
    
    formatFileSize(size) {
      if (size < 1024) return size + 'B'
      if (size < 1024 * 1024) return (size / 1024).toFixed(1) + 'KB'
      return (size / (1024 * 1024)).toFixed(1) + 'MB'
    },
    
    getMessageIcon(type) {
      const icons = {
        success: '✅',
        error: '❌',
        warning: '⚠️',
        info: 'ℹ️'
      }
      return icons[type] || 'ℹ️'
    },
    
    // 获取关区名称
    getCustomsAreaName(areaCode) {
      const area = this.customsAreas.find(a => a.areaCode === areaCode)
      return area ? area.areaName : areaCode
    },
    
    // 获取当前登录用户ID
    getCurrentUserId() {
      // 从localStorage或Vuex store获取当前用户信息
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      return userInfo.id || 1
    },
    
    showMessage(type, text) {
      this.message = { show: true, type, text }
      setTimeout(() => {
        this.message.show = false
      }, 3000)
    }
  }
}
</script>

<style scoped>
.data-collection-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.page-header {
  background: white;
  padding: 30px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.page-title {
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-size: 28px;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.header-icon {
  margin-right: 10px;
  font-size: 32px;
}

.page-description {
  color: #7f8c8d;
  margin: 0;
  font-size: 16px;
}

.tab-container {
  background: white;
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tab-nav {
  display: flex;
  background: #f8f9fa;
}

.tab-btn {
  flex: 1;
  padding: 15px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  color: #6c757d;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.tab-btn:hover {
  background: #e9ecef;
  color: #495057;
}

.tab-btn.active {
  background: #007bff;
  color: white;
}

.tab-content {
  padding: 0;
}

.form-card, .upload-card, .list-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f3f4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.card-header h3 {
  color: #2c3e50;
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 600;
}

.card-header p {
  color: #7f8c8d;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.manual-form {
  max-width: 800px;
}

.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: #2c3e50;
}

.required {
  color: #e74c3c;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e1e5e9;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #007bff;
}

.form-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #e9ecef;
}

.btn {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
}

.upload-form {
  margin-bottom: 20px;
}

.file-upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.file-upload-zone:hover {
  border-color: #007bff;
  background: #f8f9ff;
}

.upload-content {
  pointer-events: none;
}

.upload-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.upload-text {
  font-size: 16px;
  color: #495057;
  margin: 0 0 8px 0;
}

.upload-hint {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.file-info {
  margin-bottom: 20px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
}

.file-icon {
  font-size: 20px;
}

.file-name {
  flex: 1;
  font-weight: 500;
}

.file-size {
  color: #6c757d;
  font-size: 14px;
}

.remove-btn {
  background: #dc3545;
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.upload-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.format-guide {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #007bff;
}

.format-guide h4 {
  color: #2c3e50;
  margin: 0 0 15px 0;
  font-size: 16px;
}

.format-example p {
  margin: 8px 0;
  font-size: 14px;
  color: #495057;
}

.filter-bar {
  background: #f8f9fa;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-group label {
  font-weight: 500;
  color: #2c3e50;
  white-space: nowrap;
}

.filter-group select {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
}

.data-table {
  overflow-x: auto;
  margin-bottom: 20px;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  background: white;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #dee2e6;
}

.data-table th {
  background: #f8f9fa;
  font-weight: 600;
  color: #2c3e50;
  position: sticky;
  top: 0;
}

.data-table tr:hover {
  background: #f8f9ff;
}

.data-type-tag {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.data-type-tag.ftp {
  background: #e3f2fd;
  color: #1976d2;
}

.data-type-tag.csv {
  background: #e8f5e8;
  color: #388e3c;
}

.data-type-tag.manual {
  background: #fff3e0;
  color: #f57c00;
}

.data-type-tag.active {
  background: #f3e5f5;
  color: #7b1fa2;
}

.amount {
  font-family: monospace;
  font-weight: 600;
  color: #2e7d32;
}

.no-data {
  text-align: center;
  color: #6c757d;
  font-style: italic;
  padding: 40px;
}

.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #e3f2fd;
  border-radius: 8px;
  margin-bottom: 20px;
}

.selected-count {
  font-weight: 500;
  color: #1976d2;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.page-info {
  font-weight: 500;
  color: #2c3e50;
}

.message-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px 20px;
  border-radius: 8px;
  color: white;
  font-weight: 500;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideIn 0.3s ease;
}

.message-toast.success {
  background: #28a745;
}

.message-toast.error {
  background: #dc3545;
}

.message-toast.warning {
  background: #ffc107;
  color: #212529;
}

.message-toast.info {
  background: #17a2b8;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.loading-icon {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.refresh-icon {
  transition: transform 0.3s ease;
}

.refresh-icon:hover {
  transform: rotate(180deg);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .data-collection-container {
    padding: 10px;
  }
  
  .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .tab-nav {
    flex-direction: column;
  }
  
  .data-table {
    font-size: 12px;
  }
  
  .batch-actions {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}
</style>
